<template>
	<div>
    <div class="good_warp">
      <div ref="menus"  class="menus">
        <ul v-if="goods.length>0">
          <li class="menu_item" v-for="(item,index) in goods" :class="{'active':index==currIndex}" @click="clickMenu(index,$event)">
          <span class="text border-1px">
            <span v-if="item.type!=-1" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="goods" ref="goods">
        <ul>
          <li v-for="item in goods" ref="good">
            <span class="list_name">{{item.name}}</span>
            <ul>
              <li class="food_item border-1px" v-for="food in item.foods" @click="clickfood(food,$event)">
                <img class="icon" width="57" height="57" :src="food.icon">
                <div class="right_wrap">
                  <div class="food_name">{{food.name}}</div>
                  <div v-if="food.description" class="food_desc">{{food.description}}</div>
                  <div class="food_sell">
                    <span class="food_info">月售{{food.sellCount}}份</span>
                    <span class="food_info">好评率{{food.rating}}%</span>
                  </div>
                  <div class="food_prices">
                    <span class="food_price">￥{{food.price}}</span>
                    <span class="food_oldPrice" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                    <div class="btn_wrap">
                      <btn :food="food" @drop="_drop"></btn>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <shopcart @drop="_drop" :selectfood="selectfood" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>
    <transition v-for="(ball,index) in balls"  :key = "index"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
    >
      <div class="ball"  v-show="ball.show" ref="ball"></div>
    </transition>
    <food :food="selectFood" ref="food" @drop="_drop"></food>
  </div>
</template>
<script type="text/ecmascript-6">
  import ajax from '@data'
  import Scroll from 'better-scroll'
  import shopcart from "components/shopcart/shopcart"
  import btn from "components/btn/btn"
  import food from "components/food/food"
  export default {
    name:"foods",
    created(){
      ajax.goods().then((data)=>{
        if(data.errno===0){
          this.goods = data.goods;
          this.$nextTick(()=>{
            this._initScroll();
            this._calculateheight();
          })
        }
      });
    },
    mounted(){
    },
    props:{
      seller:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data () {
      return {
        goods:[],
        classMap:["decrease","discount","special","invoice","guarantee"],
        goodList:[],
        scrollY:0,
        balls:[
          {show:false},
          {show:false},
          {show:false},
          {show:false},
          {show:false},
        ],
        time:null,
        selectFood:{},
        isshowfood:false
      }
    },
    methods:{
      clickfood(food,e){
        this.selectFood = food;
        this.$refs.food.show();
      },
      clickMenu(index,e){
        this.goodScroll.scrollTo(0, -this.goodList[index], 300)
      },
      _drop(dom){
          for (let i = 0;i<this.balls.length;i++) {
            if(!this.balls[i].show){
              let v = dom.getBoundingClientRect();
              if(v.x){
                this.$refs.ball[i].style.left = v.x+10+"px";
                this.$refs.ball[i].style.bottom = (window.innerHeight - v.y-6)+"px";
                this.balls[i].show=true;
                let st = setTimeout(()=>{
                  this.balls[i].show=false;
                  clearTimeout(st);
                },400)
              }
              return false;
            }
          }
      },
      beforeEnter:function(el){

      },
      enter: function (el, done) {
        el.offsetHeight
        this.$nextTick(()=>{
          el.style.left = 32+"px";
          el.style.bottom = 22+"px"
        });
        done();
      },
      afterEnter: function (el) {

      },
      _initScroll(){
        this.menuScroll = new Scroll(this.$refs.menus,{
          click:true
        });
        this.goodScroll = new Scroll(this.$refs.goods,{
          click:true,
          probeType:3
        });
        this.goodScroll.on("scroll",pos=>{
          this.scrollY = pos.y;
        })
      },
      _calculateheight(){
        let lastTop = 0;
        this.goodList = this.$refs.good.map((dom,i)=>{
          if(i==(this.$refs.good.length-1)){
            lastTop = dom.offsetTop+dom.offsetHeight
          }
          return dom.offsetTop
        })
        this.goodList.push(lastTop);
      }
    },
    computed:{
      currIndex(){
        let index = 0;
        let scrollY = Math.abs(this.scrollY);
        this.goodList.forEach((val,i)=>{
          if(this.goodList[i+1]&&this.goodList[i+1]>scrollY&&val<=scrollY){
            index =i;
          }
        })
        return index;
      },
      selectfood(){
        let res = [];
        this.goods.map(v=>{
          v.foods.map(v2=>{
            if(v2.count>0){
              res.push(v2);
            }
          });
        });
        return res;
      }
    },
    watch:{

    },
    components:{
      shopcart,btn,food
    }
  }
</script>

<style lang="stylus" rel="stylesheet/styleus">
@import "./../../common/stylus/mixin.styl";
  .good_warp
    display flex
    position absolute
    width 100%
    top 174px
    bottom 48px
    overflow hidden
    .menus
      flex 0 0 80px
      width 80px
      background #f3f5f7
      font-size 12px
      .menu_item
        width 100%
        padding 0 12px
        height 53px
        box-sizing border-box
        display table
        font-size 0
        &:last-child
          .text:after
            border none
        &.active
          background #fff
          position relative
          z-index 10
          margin-top -1px
          font-weight 700
          .text:after
            border none
        .text
          box-sizing border-box
          width 100%
          height 100%
          display table-cell
          border-1px(rgba(7,17,27,0.1))
          font-size 12px
          line-height 14px
          vertical-align middle
          .icon
            vertical-align top
            display inline-block
            width 12px
            height 12px
            margin-right 2px
            background-size 12px
            background-repeat no-repeat
            &.decrease
              bg-img("decrease_3")
            &.discount
              bg-img("discount_3")
            &.guarantee
              bg-img("guarantee_3")
            &.invoice
              bg-img("invoice_3")
            &.special
              bg-img("special_3")
    .goods
      flex 1
      .list_name
        box-sizing border-box
        display inline-block
        width 100%
        height 26px
        line-height 26px
        color rgba(147,153,159,1)
        font-size 12px
        padding-left 14px
        border-left 2px solid #d9dde1
        background #f3f5f7
      .food_item
        padding 18px
        overflow hidden
        display flex
        border-1px(rgba(7,17,27,0.1))
        &:last-child:after
          border:none
        .icon
          border-radius 2px
          flex 0 0 57px
          width 57px
        .right_wrap
          flex 1
          padding-left 10px
          box-sizing border-box
          font-size 0
          width calc( 100% - 57px)
          .food_name
            font-size 14px
            line-height 17px
          .food_desc,.food_sell
            line-height 18px
            font-size 10px
            color rgb(147,153,159)
          .food_sell
            font-size 0
            .food_info
              font-size 10px
              margin-right 8px
          .food_prices
            font-size 0
            position relative
            .food_price
              font-size 14px
              color: #F01414
              margin-right 8px
              font-weight 700
            .food_oldPrice
              font-size 10px
              font-weight 700
              text-decoration line-through
              color rgb(147,153,159)
            .btn_wrap
              position absolute
              right 0
              top -11px

.ball
  position fixed
  left 32px
  bottom 22px
  z-index 200
  transition bottom .5s cubic-bezier(.37,-0.58,.92,.73) , left .5s linear;
  width 16px
  height 16px
  border-radius 50%
  background: rgb(0,160,220)

</style>
